<template>
    <div>
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="18">
                        <el-input
                                placeholder="请输入内容"
                                v-model="page.keyword"
                                size="small"
                                maxlength="10"
                                class="input-search"
                                clearable>
                        </el-input>
                        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <div style="margin-top: 5px">
                    <el-table
                            :data="table.tableData"
                            v-loading="table.loading"
                            style="width: 100%">
                        <el-table-column
                                fixed
                                prop="ctime"
                                label="创建日期"
                                width="160"
                                :formatter="table.formatters.unix2Date">
                        </el-table-column>
                        <el-table-column
                                label="标题"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.title }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="内容"
                                width="180">
                            <template slot-scope="scope">
                                <span v-if="scope.row.path<=8">{{ scope.row.path }}</span>
                                <span v-else>{{ scope.row.path.slice(1,8) }}...</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180" fixed="right">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
            <el-footer>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.currentPage.current"
                            :page-sizes="[7,14,21,28]"
                            :page-size="page.currentPage.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
        <!--弹出框-->
        <div>
            <el-dialog title="查看热点视频信息" :visible.sync="vData.visible" width="40%">
                <el-form :model="vData.form" :rules="vData.rules" ref="uForm" v-loading="vData.form.loading">
                    <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
                        <el-input type="text" v-model="vData.form.title" autocomplete="off" placeholder="标题" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="视频" :label-width="formLabelWidth">
                        <video-player  class="video-player vjs-custom-skin"
                                       ref="videoPlayer"
                                       :playsinline="true"
                                       :options="playerOptions"
                        ></video-player>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleEditCancel">退出</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>

    export default {
        name: "hotVideo",
        data() {
            return {
                //分页
                page: {
                    currentPage:{
                        current: 1,
                        size: 7,
                    },
                    total: 0,
                    keyword: ''
                },
                //表格
                table: {
                    tableData: [],
                    loading:false,
                    formatters:{
                        unix2Date:(row, column, cellValue)=>{
                            return this.unix2Date(cellValue);
                        },
                    }
                },
                //查看
                vData: {
                    visible: false,
                    loading: false,
                    form: {
                        id: -1,
                        title: "",
                    },
                    rules: {
                        title:[
                            { required: true, message: '请输入文章标题', trigger: 'blur' },
                        ]
                    },
                    curVideo:{
                        url:''
                    }
                },
                formLabelWidth: '120px',
                playerOptions : {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: "" //url地址
                    }],
                    poster: this.getBaseUrl+"/20200414113532f4b7b0f87e83499cab5eca8c96725305.jpg", //你的封面地址
                    // width: document.documentElement.clientWidth, //播放器宽度
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                }
            }
        },
        methods: {
            //每页大小
            handleSizeChange(size) {
                console.log(`每页 ${size} 条`);
                this.page.currentPage.size=size;

                if (this.page.keyword){
                    this.handleSearch();
                }else {
                    let hotVideoVo=this.page.currentPage;
                    this.loadTableData(hotVideoVo);
                }
            },
            //当前页
            handleCurrentChange(current) {
                console.log(`当前页: ${current}`);
                this.page.currentPage.current=current;
                if (this.page.keyword){
                    this.handleSearch();
                }else {
                    let hotVideoVo=this.page.currentPage;
                    this.loadTableData(hotVideoVo);
                }
            },
            //修改
            handleEdit(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    this.vData.form={
                        id: row.id,
                        title: row.title,
                    };
                    //修改播放url
                    this.playerOptions.sources[0].src=this.getBaseUrl+""+row.path;
                    this.vData.visible=true;
                }else {
                    //提交热点文章修改信息
                    const _this = this;
                    this.$refs.uForm.validate((valid) => {
                        if (valid) {
                            _this.vData.loading=true;
                            let hotVideoVo=_this.vData.form;
                            this.putRequestJson("/hotvideo/u",hotVideoVo)
                                .then(resp =>{
                                    if (resp && resp.data && resp.data.code === '200') {
                                        _this.vData.loading=false;
                                        _this.vData.visible=false;
                                        //清空数据
                                        _this.vData.form={
                                            id: -1,
                                            title: "",
                                        };
                                    }else {
                                        _this.vData.loading=false;
                                    }
                                })
                        }
                    });
                }
            },
            handleEditCancel(){
                this.playerOptions.sources[0].src="";
                this.vData.visible=false;
            },
            //删除
            handleDelete(index, row) {
                if(row){
                    //修改弹出框信息
                    console.log(`当前索引: ${index}`);
                    this.dData.form={
                        id: row.id,
                        title: row.title,
                    };
                    this.dData.visible=true;
                }else {
                    //提交热点文章删除信息
                    const _this = this;
                    _this.dData.loading=true;
                    let ids=[];
                    ids.push(_this.dData.form.id);
                    this.deleteRequest("/hotvideo/d/"+ids)
                        .then(resp =>{
                            if (resp && resp.data && resp.data.code === '200') {
                                _this.dData.loading=false;
                                _this.dData.visible=false;
                                //清空数据
                                _this.dData.form={
                                    id: -1,
                                    title: "",
                                };
                            }else {
                                _this.dData.loading=false;
                            }
                        })
                }
            },
            //添加热点文章
            handleAdd(){
                const _this = this;
                this.$refs.aForm.validate((valid) => {
                    if (valid) {
                        _this.aData.loading=true;
                        this.$refs.upload.submit();
                    }
                });
            },
            //搜索
            handleSearch(){

            },
            //装载热点文章
            loadTableData(hotVideoVo){
                const _this = this;
                _this.table.loading=true;
                this.getRequest("/hotvideo/g",hotVideoVo)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            _this.table.tableData=data.result.records;
                            _this.page.total=data.result.total;
                            _this.table.loading=false;
                        }else {
                            _this.table.loading=false;
                        }
                    })
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            uploadExceed(files, fileList) {
                this.$set(fileList[0], 'raw', files[0]);
                this.$set(fileList[0], 'name', files[0].name);
                this.$refs['upload'].clearFiles();//清除文件
                this.$refs['upload'].handleStart(files[0]);//选择文件后的赋值方法
            },
            handleSuccess(response) {
                this.$message.success(response.msg);
                this.aData.loading=false;
                this.aData.visible=false;
                //清空数据
                this.aData.form={
                    title: "",
                };
            },
            beforeUpload(file) {
                const isLt900M = file.size / 1024 / 1024 < 900;

                if (!isLt900M) {
                    this.$message.error('上传头像图片大小不能超过 900MB!');
                }
                return isLt900M;
            },
        },
        computed:{
            getBaseUrl(){
                return this.$store.getters.getBaseUrl;
            }
        },
        mounted() {
            //装载第一页数据
            let hotVideoVo = this.page.currentPage;
            this.loadTableData(hotVideoVo);
        }
    }
</script>

<style scoped>

    .input-search {
        width: 150px;
        margin-left: 300px;
    }

    .input-form{
        width: 150px;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 150%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        align-content: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clear-fix:before,
    .clear-fix:after {
        display: table;
        content: "";
    }

    .clear-fix:after {
        clear: both
    }

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .item {
        margin: 4px;
    }
</style>